<template>
    <div>
        <div v-if="pilot_task.status_id === 1" style='margin: 20px 0px;'>
            <a-button @click="handle_add_pilot" type='primary'>新增</a-button>
        </div>
        <a-table :columns="pilot_columns" :dataSource="pilot_list" rowKey="user_id" :pagination="pilot_pagination" bordered>
            <template slot="tasked" slot-scope="text, record, index">
                <div style='overflow: auto; max-height: 100px; '>
                    <div style="color: #1890FF;" v-for="(item, index) in record.tasks" :key='index'>
                        {{item.sn+item.name}}
                    </div>
                </div>
            </template>
            <template slot="main" slot-scope="text, record, index">
                <a-icon type="check" v-if="record.is_main == 1"/>
                <a-button type="link" :disabled="pilot_task.status_id == 2" @click="handle_change_main_pilot(record)" v-else>设为主飞手</a-button>
            </template>
            <template slot="main2" slot-scope="text, record, index">
                <a-icon type="check" v-if="record.is_main == 1"/>
                <!-- <a-button type="link" :disabled="pilot_task.status_id == 2" @click="handle_change_main_pilot(record)" v-else>设为主飞手</a-button> -->
            </template>
            <template slot="action" slot-scope="text, record, index">
                <!-- <a @click="handle_cancel_select(record)">取消选中</a> -->
                <a-button type="link" :disabled="pilot_task.status_id == 2" @click="handle_cancel_select(record)">取消选中</a-button>
            </template>
        </a-table>


        
        <!-- 选择飞手 start -->
        <a-modal
            title="选择飞手"
            :visible="select_visible"
            @cancel='select_visible=false'
            width='80%'
            >
            <div style='display: flex; align-items:center; margin-bottom:20px;'>
                <a-input style='border: 1px solid #fff;' placeholder="请输入飞手姓名或账号" v-model="search_realname" allowClear/>
                <a-button type='primary' @click="handle_search_polit">搜索</a-button>
            </div>
            <a-table rowKey="user_id" :columns="pilot_columns_dialog" :dataSource="pilot_select_list" :pagination="false" bordered>
                <template slot="tasked" slot-scope="text, record, index">
                    <div style='overflow: auto; max-height: 100px; '>
                        <div style="color: #1890FF;" v-for="(item, index) in record.tasks" :key='index'>
                            {{item.sn+item.name}}
                        </div>
                    </div>
                </template>
                <template slot="action" slot-scope="text, record, index">
                    <a @click="handle_cancel_select_pilot(record)" v-if="selected_pilot_ids.includes(record.user_id)">取消选中</a>
                    <a @click="selected_pilot_list.push(record)" v-else>选中</a>
                </template>
            </a-table>
            <div style='margin-top: 20px;'>
                已选中的飞手: {{selected_pilot_list.map(item => item.realname).join('、')}}
            </div>
            <template slot="footer">
                <a-button key="submit" type="primary" @click="handle_submit_select_pilot">
                    确定
                </a-button>
        </template>
        </a-modal>
        <!-- 选择飞手 end -->
    </div>
</template>

<script>
    export default {
        props: {
            pilot_list: {
                type: Array,
                default: () => ([])
            },
            pilot_pagination: {
                type: Object,
                default: () => ({})
            },
            pilot_task: {
                type: Object,
                default: () => ({})
            }
        },
        computed: {
            selected_pilot_ids(){
                // let new_list = this.selected_pilot_list.concat(this.pilot_list)
                return this.selected_pilot_list.map(item => item.user_id) || []
            }
        },
        data(){
            return {
                pilot_columns: [
                    {title: "飞手姓名", dataIndex: "realname", align: "center"},
                    {title: "账号", dataIndex: "username", align: "center"},
                    {title: "手机", dataIndex: "mobile", align: "center"},
                    {title: "已经承接的任务", scopedSlots: {customRender: "tasked"}, align: "center"},
                    {title: "主飞手", scopedSlots: {customRender: "main"}, align: "center"},
                    {title: "操作", scopedSlots: {customRender: "action"}, align: "center"},
                ],
                pilot_notdispatch_columns: [
                    {title: "飞手姓名", dataIndex: "realname", align: "center"},
                    {title: "账号", dataIndex: "username", align: "center"},
                    {title: "手机", dataIndex: "mobile", align: "center"},
                    {title: "主飞手", scopedSlots: {customRender: "main2"}, align: "center"},
                ],
                pilot_columns_dialog: [],
                select_visible: false,
                pilot_select_list: [],

                search_realname: '',
                selected_pilot_list: []

            }
        },
        methods: {
            async handle_add_pilot(){
                const { pilot_task } = this
                if(pilot_task){
                    if(pilot_task.period_time){
                        let res = await this.http('get', 'pilot/no-task-pilot', {
                            time: pilot_task.period_time.split('-'),
                            task_id: pilot_task.id
                        })
                        this.pilot_select_list = res.data || []
                        this.selected_pilot_list = []
                        let main = this.pilot_list.find(v => v.is_main == 1)
                        this.pilot_list.forEach( item =>{
                            let pilot = this.pilot_select_list.find(f=>f.user_id == item.user_id);
                            if(pilot){
                                if(main && main.user_id == pilot.user_id) pilot.is_main = 1
                                this.selected_pilot_list.push(pilot);
                                // this.pilot_select_list.splice(index,1)
                            }
                        })

                        // this.selected_pilot_list = this.pilot_list;
                        this.pilot_columns_dialog = this.pilot_columns.filter(item => item.title != '主飞手')
                        
                        this.pilot_select_list_back = JSON.stringify(this.pilot_select_list)
                        this.select_visible = true
                    }
                }
            },
            handle_submit_select_pilot(){
                this.$confirm({
                    title: '系统提示',
                    content: `是否提交此次更改的信息`,
                    onOk: close => {
                        this.$parent.edit_pilot([
                            ...this.selected_pilot_list
                        ])
                        this.selected_pilot_list = []
                        this.select_visible = false
                        close()
                    },
                });
            },

            handle_search_polit(){
                let { pilot_select_list, pilot_select_list_back, search_realname } = this
                if(search_realname){
                    this.pilot_select_list = pilot_select_list.filter(item => item.realname.indexOf(search_realname)!==-1 || item.username.indexOf(search_realname)!==-1)
                }else{
                    this.pilot_select_list = JSON.parse(pilot_select_list_back)
                }
            },

            handle_cancel_select_pilot(pilot){
                let index = this.selected_pilot_list.findIndex(item => item.user_id === pilot.user_id)
                if(index !== -1){
                    this.selected_pilot_list.splice(index, 1)
                }
            },

            handle_cancel_select(pilot){

                this.$confirm({
                    title: '系统提示',
                    content: `是否取消选中姓名${pilot.realname}`,
                    onOk: close => {
                        let index = this.pilot_list.findIndex(item => item.user_id === pilot.user_id)
                        if(index !== -1){
                            this.pilot_list.splice(index, 1)
                        }
                        this.$parent.edit_pilot(this.pilot_list)
                        close()
                    },
                });
            },

            handle_change_main_pilot(pilot){
                this.$confirm({
                    title: '系统提示',
                    content: `是否将姓名${pilot.realname}选为主飞手？`,
                    okText: '确认',
                    cancelText: '取消',
                    onOk: async close => {
                        let { pilot_list } = this
                        let index = pilot_list.findIndex(item => item.user_id === pilot.user_id)
                        if(index !== -1){
                            pilot_list.forEach(item => {
                                item.is_main = 0
                            })
                            pilot_list[index].is_main = 1
                            this.pilot_list = pilot_list
                            this.$parent.edit_pilot(this.pilot_list)
                        }
                        close()
                    }
                });
            },
        },
    }
</script>

<style scoped>

</style>